import React, { useEffect, useRef } from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

const RtmpPlayer = ({ rtmpUrl }) => {
    const videoRef = useRef(null);
    const playerRef = useRef(null);

    useEffect(() => {
        // Initialize Video.js player
        playerRef.current = videojs(videoRef.current, {
            controls: true,
            autoplay: false,
            preload: 'auto',
            techOrder: ['flash', 'html5'],
            sources: [{
                src: rtmpUrl,
                type: 'rtmp/flv' // 使用 RTMP 类型
            }],
        });

        // Cleanup function to dispose the player on unmount
        return () => {
            if (playerRef.current) {
                playerRef.current.dispose();
            }
        };
    }, [rtmpUrl]);

    return (
        <div>
            <div data-vjs-player>
                <video ref={videoRef} className="video-js vjs-big-play-centered" />
            </div>
        </div>
    );
};

export default RtmpPlayer;
